{include file='public/head'}
<style>
    .layui-form-label {
        width: 90px
    }

    .layui-input-block {
        margin-left: 120px;
    }

    .x-body {
        min-width: 1200px;
    }

    body {
        overflow-x: scroll;
    }
</style>
<body>
<div class="x-body">
    <fieldset class="layui-elem-field">
        <legend>财务统计（{$start|date='Y-m-d',###}~{$end|date='Y-m-d',###}）</legend>
        <div class="layui-field-box">
            <fieldset class="layui-elem-field layui-col-md6" style="height: 250px">
                <legend>利润计算</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单总价</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="￥{$ordertotal}" disabled>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">采购支出</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="￥{$purchaseExpense}" disabled>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">运费支出</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="￥{$waybillExpense}" disabled>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">订单毛利</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input"
                                   value="￥{$ordertotal-$purchaseExpense-$waybillExpense}" disabled>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-col-md6" style="height: 250px">
                <legend>统计范围</legend>
                <div class="layui-field-box">

                    {if count($company)>0}
                    <div class="layui-form-item">
                        <label class="layui-form-label"><b style="color:red">*</b>选择公司</label>
                        <div class="layui-input-block layui-form">
                            <select name="company_id" id="company_id">
                                <option value="">当前公司</option>
                                {volist name="company" id="vo"}
                                {if $Think.get.company_id == $vo['id']}
                                <option value="{$vo.id}" selected>{$vo.name}</option>
                                {else/}
                                <option value="{$vo.id}">{$vo.name}</option>
                                {/if}
                                {/volist}
                            </select>
                        </div>
                    </div>
                    {else/}
                    <input type="hidden" id="company_id" value="">
                    {/if}

                    <div class="layui-form-item">
                        <label class="layui-form-label"><b style="color:red">*</b>开始日期</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="start" lay-verify="required"
                                   value="{$start|date='Y-m-d',###}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><b style="color:red">*</b>结束日期</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="end" lay-verify="required"
                                   value="{$end|date='Y-m-d',###}">
                        </div>
                    </div>

                    <div class="layui-form-item" style="text-align: center;">
                        <button class="layui-btn" onclick="search()" style="width: 100%">提交</button>
                    </div>
                </div>
            </fieldset>
            <div id="container" class="layui-col-md6" style="height: 380px;float: left"></div>
            <div id="container1" class="layui-col-md6" style="height: 380px;float: left"></div>
        </div>
    </fieldset>
    <input type="hidden" id="otherExpense" value="{$otherExpense}">
    <input type="hidden" id="selfRecharge" value="{$selfRecharge}">
    <input type="hidden" id="publicRecharge" value="{$publicRecharge|default=0}">
    <input type="hidden" id="waybillExpense" value="{$waybillExpense}">
    <input type="hidden" id="purchaseExpense" value="{$purchaseExpense}">
</div>
</body>
{include file='public/foot'}
<script type="text/javascript">
    var laydate = layui.laydate;
    laydate.render({
        elem: '#start' //指定元素
    });
    laydate.render({
        elem: '#end' //指定元素
    });

    function search() {
        var html = '';
        var company_id = $("#company_id").val();
        html += "&company_id=" + company_id;
        var start = $("#start").val();
        html += "&start=" + start;
        var end = $("#end").val();
        html += "&end=" + end;
        location.href = "reportForms.html?" + html;
    }

    var otherExpense = $("#otherExpense").val();
    var selfRecharge = $("#selfRecharge").val();
    var publicRecharge = $("#publicRecharge").val();
    var waybillExpense = $("#waybillExpense").val();
    var purchaseExpense = $("#purchaseExpense").val();

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = {
        title: {
            text: '充值统计（人民币）',
            left: '45%'
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['自用钱包', '对公钱包'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '充值金额￥',
                type: 'bar',
                barWidth: '60%',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [selfRecharge, publicRecharge]
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    var dom1 = document.getElementById("container1");
    var myChart1 = echarts.init(dom1);
    option1 = {
        title: {
            text: '支出统计（人民币）',
            left: '45%'
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['采购支出', '运费支出', '其他支出'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '支出金额￥',
                type: 'bar',
                barWidth: '60%',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [purchaseExpense, waybillExpense, otherExpense]
            }
        ]
    };
    ;
    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }
</script>
